<style lang="less">
  #news-home-page {
    background: #3d3936 url(~@/assets/new-house/new_house_bg.jpg) no-repeat;
    .search {
      margin: 2em 0 0 0;
      padding-bottom: 3em;
      text-align: center;
    }
    .news-wrapper {
      background: #fff;
      min-height: 500px;
      padding: 2em 0;
      .news {
        width: 1110px;
        margin: 0 auto;
        li {
          display: flex;
          margin-bottom: 3em;
        }
        h2 {
          font-weight: normal;
          font-size: 23px;
        }
        .img {
          width: 300px;
          height: 180px;
          background: #eee;
          margin-right: 2em;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .content {
            width: 900px;
            height: 150px;
        }
        .date{
          margin: 1em 0em;
          font-size: 16px;
        }
        .subtitle{
          color: #999999;
          font-size: 16px;
          line-height: 25px;
        }
      }
    }
  }
</style>
<template>
  <div id="news-home-page">
    <Navigator></Navigator>
    <div class="search">
      <Input size="large" v-model="keyword" icon="search" placeholder="搜索资讯" style="width:400px;"/>
    </div>
    <div class="news-wrapper">
      <div class="news">
        <ul>
          <li v-for="news in searchNewsList">
            <router-link class="img" :key="news.id" :to="{name:'newsDetail', params: {id: news.id}}">
              <img v-if="news.coverPic" :src="news.coverPic | newsCoverPic" alt="">
              <img v-else :src="no_image" alt="">
            </router-link>
            <div class="content">
              <h2>
                <router-link :key="news.id" :to="{name:'newsDetail', params: {id: news.id}}">
                  {{news.title}}
                </router-link>
              </h2>
              <p class="date">发布日期:{{news.createdAt | formatDate('YYYY-MM-DD hh:mm:ss')}}</p>
              <div class="subtitle">{{news.content | substring(0, 170)}}</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <PageFooter></PageFooter>
  </div>
</template>

<script>

  import api from '@/service/api'

  export default {
    components: {
      Navigator: require('@/components/Navigator.vue'),
      PageFooter: require('@/components/PageFooter/index.vue')
    },
    data () {
      return {
        keyword: '',
        newsList: [],
        newsId: '',
        no_image:'http://jyhimg.cdjyh.com/no_image.png?imageMogr2/auto-orient/thumbnail/!270x200r/gravity/Center/crop/270x180/blur/1x0/quality/75|watermark/2/text/5oiQ6YO95ZCJ5YWD5rGH/font/5qW35L2T/fontsize/240/fill/IzAwMDAwMA==/dissolve/100/gravity/SouthWest/dx/10/dy/10|imageslim'
      }
    },
    methods: {
      search () {
        this.spinShow = true
        api.newsList().then((res) => {
          this.newsList = res.data.content
        }).catch(() => {
          this.spinShow = false
        })
      },
      backtop () {
        document.body.scrollTop = 0
      },
      currentIndex () {
        return _.findIndex(this.newsList, (news) => news.id === parseInt(this.newsId, 10))
      }
    },
    computed: {
      prev () {
        var index = this.currentIndex()
        if (index === 0) {
          return null
        }
        return this.newsList[index - 1]
      },
      searchNewsList () {
        if (this.keyword.trim().length < 1) {
          return this.newsList
        }
        return this.newsList.filter((news) => {
          return news.title.indexOf(this.keyword) > -1
        })
      },
      next () {
        var index = this.currentIndex()
        if (_.last(this.newsList) === this.newsList[index]) {
          return
        }
        return this.newsList[index + 1]
      }
    },
    mounted () {
      this.search()
    }
  }
</script>

